import React from 'react'
import { NavBar,  Icon ,  Modal, Button} from 'antd-mobile'

// 接受两个参数 title="首页" isIndex={true} title接受标题 isIndex传入布尔值 默认为false 
// 增加点击出现弹窗  选择  需要传入 tabs 和 tabsChoose（）方法 还有defaultradio
//  tabs需要是一个对象 包含标题 和一个数组  返回的是 被点击的项调用该函数 defaultradio是传入一个数值 默认选择项
function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
      if (matchesSelector.call(el, selector)) {
        return el;
      }
      el = el.parentElement;
    }
    return null;
  }

export default class Header  extends React.PureComponent{
    
    constructor(props){
        super(props);
        this.state={
            modal1: false,
            radiodefaultValue:props.tabs?props.tabs.alertitems[props.defaultradio]?props.tabs.alertitems[props.defaultradio].key : "" : ""
        }
    }
    
    defaultProps= {
        isIndex: false,
        tabs:{},
        defaultradio:0,
    }

    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
          [key]: true,
        });
      }
      onClose = key => () => {
        this.setState({
          [key]: false,
        });
      }
      onWrapTouchStart = (e) => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
          return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
          e.preventDefault();
        }
      }

      handleRadioChange = (e) => {
        this.setState({
          radiodefaultValue: e.target.value
        })
      }

      shouldComponentUpdate(nextProps, nextState) {
        if (this.props.title === nextProps.title  && this.state === nextState ) {
          return false;
        } else {
          return true;
        }
      }
    
      componentWillReceiveProps(nextProps){
        if(nextProps.defaultradio != this.props.defaultradio){
          const {tabs,defaultradio} = nextProps
          this.setState({
            radiodefaultValue:tabs.alertitems[defaultradio].key
          })
        }
        // const radiodefaultValue = tabs?tabs.alertitems[defaultradio]?tabs.alertitems[defaultradio].key : "" : ""
      }

render(){
        const{ title,righticon,onClick,tabsChoose,tabs,defaultradio}= this.props
        const {radiodefaultValue} = this.state
        console.log(defaultradio,'.d.d',radiodefaultValue);
        
        return <div>
        <NavBar mode="dark"  icon={this.showLeftIcon()} rightContent={righticon? 
            <i className={"iconfont icon-" + righticon} onClick={()=>onClick()}/>
        : ""}>{this.tab(title)}  {this.props.children}
        </NavBar> 
       { this.props.tabs?<Modal
            visible={this.state.modal1}
            transparent
            maskClosable={true}
            onClose={this.onClose('modal1')}
            title={this.props.tabs.alertTit}
            footer={[{ text: '确定', onPress: () => { tabsChoose(radiodefaultValue); this.onClose('modal1')(); } }]}
            wrapProps={{ onTouchStart: this.onWrapTouchStart }}
          >
           {/* height: 250, overflow: 'scroll', */}
            <div style={{textAlign: "left" }}> 
                  {this.props.tabs.alertitems.map((item,index)=>{
                    return  <div className="p" key={index}><label >
                        <div><input type="radio" value={item.key} checked={radiodefaultValue == item.key} onChange={(e) => this.handleRadioChange(e)} /><span></span></div>
                    {item.title}</label></div>
                  })}
            </div>
          </Modal> : ""}
    </div>
    }
    showLeftIcon=() =>{
      const LeftClick = this.props.LeftClick
        if(!this.props.isIndex){
            return <Icon type="left"  onClick={() =>{LeftClick? this.props.history.push(LeftClick) : this.props.history.go(-1)}} />
        }
    }
    tab(title){
        // console.log(this.props.tabs)
        if(!this.props.tabs){
            return  title
        }else{
            return <div onClick={this.showModal('modal1')} >{title}<i  className={this.state.modal1 ? "iconfont icon-xiala shang" : " iconfont icon-xiala"}/></div>
        }
    }
}